/* eslint-disable */
<template>
	<div id="popup" class="ol-popup chart-popup">
		<div
			:class="{
				'popup-header-blue': !(
					popupType == 'search' || popupType == 'rain'
				),
			}"
		>
			<span
				v-if="popupType == 'search' || popupType == 'rain'"
				class="popup-title"
			>
				{{ "站点：" + popTitle }}
			</span>
			<span v-else>订正预报修改</span>
			<span id="popup-closer" class="ol-popup-closer"></span>
		</div>
		<div id="popup-content">
			<ul v-if="popupType === 'search'">
				<li>
					<span class="popup-label">站点编号：</span>
					<span>{{ station.stationNumber }}</span>
				</li>
				<li>
					<span class="popup-label">地市：</span>
					<span>{{ station.stationAddress }}</span>
				</li>
				<li>
					<span class="popup-label">区县：</span>
					<span>{{ station.stationCounty }}</span>
				</li>
				<li>
					<span class="popup-label">经度：</span>
					<span>{{ station.longitude }}</span>
				</li>
				<li>
					<span class="popup-label">纬度：</span>
					<span>{{ station.latitude }}</span>
				</li>
				<li>
					<span class="popup-label">创建时间：</span>
					<span>{{ station.createTime }}</span>
				</li>
			</ul>
			<div
				v-else-if="popupType === 'rain'"
				class="chart"
				ref="mapChart"
				style="width: 500px; height: 240px"
			></div>
			<div v-else>
				<div
					class="table"
					style="
						min-width: 300px;
						max-height: 189px;
						overflow-y: auto;
					"
				>
					<el-table :data="dataTable" border style="width: 100%">
						<el-table-column
							prop="staionName"
							label="站名"
							align="center"
							width="180"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>{{ scope.row.staionName }}</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="stationId"
							label="时间"
							align="center"
							width="120"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<span>{{
									`${scope.row.startDate} ${scope.row.startTime}:00:00`
								}}</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="startTime"
							v-for="ac in alterColumns"
							:key="ac"
							:label="ac"
							align="center"
							width="50"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<el-input
									size="mini"
									v-model="scope.row[ac]"
								></el-input>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="popup-bottom">
					<el-button type="primary" size="mini" @click="handleModify">
						确认修改
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts';

import {
	postAction
} from '@/api/action'

export default {
	name: 'Chart',
	props: {
		popTitle: String,
		cXAxis: Array,
		cOption: Array,
		popupType: String
	},
	data() {
		return {
			loading: null,
			title: '',
			url: '/api/correctForecast/byListIdApudate',
			dataTable: [],
			alterColumns: [], // 可修改字段
			option: {
				// title: {
				//   text: '站名:梧州站',
				//   textStyle: {
				//     color: '#3285ff',
				//     fontSize: 14
				//   }
				// },
				tooltip: {
					trigger: 'axis',
					axisPointer: { type: 'cross' }
				},
				xAxis: {
					name: '时\n效',
					nameGap: 5,
					type: 'category',
					data: ['12', '24', '36', '48', '60', '72'],
					nameTextStyle: {
						color: '#666',
						fontSize: 12
					},
					axisTick: {
						show: false,
					},
					axisLine: {
						lineStyle: {
							color: '#666'
						}
					}
				},
				yAxis: {
					name: '(mm)',
					type: 'value',
					nameTextStyle: {
						color: '#666',
						fontSize: 12
					},
					axisTick: {
						show: false,
					},
					axisLine: {
						lineStyle: {
							color: '#666'
						}
					}
				},
				series: [{
					data: [],
					barWidth: 15,
					itemStyle: {
						color: '#3285ff'
					},
					type: 'bar'
				}],
				grid: {
					left: 30,
					top: 30,
					right: 30,
					bottom: 20
				}
			},
			theChart: null,
			station: {}
		}
	},
	watch: {
		cOption: {
			handler(newOp, oldOp) {
				if (this.popupType === 'rain') {
					//   console.log('cccccccccc', newOp);
					this.$nextTick(() => {
						this.initChart();
					})
				} else {
					this.updateChart();
				}
			},
			deep: true,
		},
	},
	methods: {
		initChart() {
			//   console.log('cccccccc', this.theChart);
			this.theChart = echarts.init(this.$refs.mapChart);
			this.updateChart();
		},
		updateChart() {
			if (this.popupType == 'search') {
				this.station = this.cOption[0];
			} else if (this.popupType == 'rain') {
				this.option.series[0]['data'] = this.cOption;
				// this.option.xAxis.data = this.cXAxis;
				this.$set(this.option.xAxis, 'data', this.cXAxis);
				this.option && this.theChart.setOption(this.option);
			} else {
				this.dataTable = this.cOption;
				this.alterColumns = [];
				if (!this.dataTable.length) {
					return
				}

				const obj = this.dataTable[0];
				for (const key in obj) {
					if (Object.hasOwnProperty.call(obj, key)) {
						if (/time\d/.test(key)) {
							this.alterColumns.push(key)
						}
					}
				}
				this.alterColumns.sort((prev, next) => {
					return prev.substring(4) - next.substring(4);
				})
				console.log(this.alterColumns);
			}
		},
		// 修改
		handleModify() {
			this.loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			const modifiedData = this.dataTable.map((item) => {
				return {
					'id': item.id,
					'time3': null,
					'time6': null,
					'time9': null,
					'time12': item.time12,
					'time15': null,
					'time18': null,
					'time21': null,
					'time24': item.time24,
					'time27': null,
					'time30': null,
					'time33': null,
					'time36': item.time36,
					'time39': null,
					'time42': null,
					'time45': null,
					'time48': item.time48,
					'time51': null,
					'time54': null,
					'time57': null,
					'time60': item.time60,
					'time63': null,
					'time66': null,
					'time69': null,
					'time72': item.time72
				}
			})
			postAction(this.url, modifiedData).then(res => {
				console.log('修改', res);
				if (res.msg === '成功') {
					this.$message({
						message: `修改成功`,
						type: 'success'
					})
					this.$emit('refresh-map');
				}
			}).finally(() => {
				this.loading.close();
			})
		}
	}
}
</script>

<style lang="scss">
.ol-popup {
	.el-table__row {
		td {
			padding: 5px 0;

			.cell {
				width: 100% !important;
				padding: 0 5px;

				.el-input__inner {
					padding: 0 5px;
					text-align: center;
				}
			}
		}
	}

	.el-table__body-wrapper {
		max-height: 30vh;
		overflow-y: auto;
	}
}
</style>

<style lang="scss">
.ol-popup.chart-popup {
	position: absolute;
	background-color: white;
	-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	padding: 32px 15px 15px 15px;
	border-radius: 4px;
	// border: 1px solid #cccccc;
	bottom: 12px;
	left: -50px;
	min-width: 395px;
	min-height: 230px;
	font-size: 13px;
	z-index: 1000;
	display: grid;

	.popup-title {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0 15px;
		color: #3285ff;
		font-size: 14px;
		font-weight: bold;
		line-height: 24px;
		max-width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: keep-all;
		white-space: nowrap;
	}
}

/* .ol-popup:after,
  .ol-popup:before {
  	top: 100%;
  	border: solid transparent;
  	content: " ";
  	height: 0;
  	width: 0;
  	position: absolute;
  	pointer-events: none;
  }

  .ol-popup:after {
  	border-top-color: white;
  	border-width: 10px;
  	left: 48px;
  	margin-left: -10px;
  }

  .ol-popup:before {
  	border-top-color: #cccccc;
  	border-width: 11px;
  	left: 48px;
  	margin-left: -11px;
  } */

.ol-popup-closer {
	text-decoration: none;
	position: absolute;
	top: 5px;
	right: 8px;
	padding: 0 5px;
	cursor: pointer;
}

.ol-popup-closer:after {
	content: "✖";
}

.ol-popup p {
	border-bottom: 1px dashed #dedede;
}

.popup-header-blue {
	position: absolute;
	width: 100%;
	height: 32px;
	background: #3e8aea;
	color: #fff;
	line-height: 32px;
	text-align: center;
	padding: 0 1em;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	.ol-popup-closer {
		top: 0;
	}
}

.popup-bottom {
	margin-top: 10px;
	width: 100%;
	text-align: center;
}
#popup-content {
	padding: 15px 10px 10px;
	width: 100%;
	/* height: 100%; */
}

#popup-content li {
	line-height: 24px;
}

#popup-content li .popup-label {
	font-weight: 600;
}

.ol-overlaycontainer-stopevent {
	z-index: 1999 !important;
}
</style>
